<template>
  <div class="home">
    <Header></Header>
    <br>
    <div class="container text-left">
      <div class="col-sm-10 col-sm-push-1">
        <div class="row margin-tb30">
          <div class="col-xs-4 padding-left40">
            <img :src="'/static/img/'+news.imgName" class="min-width-full" alt="" style="max-width: 200px;">
          </div>
          <div class="col-xs-8 show-title">
            <p class="text-color-2184BA font17 font-weight-500">
              <a :title="news.title" v-text="news.title"></a>
            </p>
            <p class="font17 text-color-595E65" :title="news.addTime" v-text="news.addTime"></p>
            <p :title="news.abstract" v-text="news.abstract"></p>
          </div>
        </div>
      </div>
    </div>
    <hr class="margin-none">
    <div class="container font16" style="margin: 20px 0px 50px; min-height: 40vh">
      <div class="row">
        <div class="col-sm-10 col-xs-push-1 margin-top20 text-left" id="content" v-html="decode(news.content)"></div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from './fragment/Header.vue'
import Banner from './fragment/Banner.vue'
import Footer from './fragment/Footer.vue'
import { NewsList } from '../assets/js/data.js'

export default {
  name: 'Home',
  components: { Header, Banner, Footer },
  mounted() { this.getNewsById() },
  methods: {
    getNewsById() {
      for (var i in NewsList) {
        if (NewsList[i].id == parseInt(this.$route.params.id)) {
          this.news = NewsList[i];
        }
      }
    },
    decode: function(param) {
      var ret = "";
      try { ret = decodeURIComponent(param); } catch (err) { ret = param; }
      return ret;
    }
  },
  data() {
    return {
      NewsList: NewsList,
      news: {}
    }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container{min-width: 1200px;margin: 0 auto!important}

</style>
